import './AddCustomer.less'
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import Immutable from 'Immutable'
import pureRender from "pure-render-decorator"
import Customer from '../components/Customer'
import {fetchCitysIfNeed,fetchDistrictsIfNeed} from '../../../actions'
import DefaultSelect from "../../../components/DefaultSelect"




@connect((state)=>({
  city:state.get("city")
}))
export default class  extends Component {
  constructor(props){
    super(props)
    this._handleChange=this._handleChange.bind(this)
    this._handleCityChange=this._handleCityChange.bind(this)
    this._handleDistrictChange=this._handleDistrictChange.bind(this)
    this._handleCommChange=this._handleCommChange.bind(this)
  }
  componentDidMount(){
    const {dispatch} =this.props;
    dispatch(fetchCitysIfNeed())


  }


  render() {
    const citys = this.props.city.get("citys")
    const districts = this.props.city.get("districts")
    const comms = this.props.city.get("comms")
    console.log(districts.toJS());
    return (
      <div className="add-customer">

        <DefaultSelect options={citys} onChange={this._handleCityChange}></DefaultSelect>
        <DefaultSelect options={districts} onChange={this._handleDistrictChange}></DefaultSelect>
        <DefaultSelect options={comms} onChange={this._handleCommChange}></DefaultSelect>
        <footer>
          确认
        </footer>

      </div>
    )
  }
  _handleChange(){

  }
  _handleCityChange(event){
    const id = event.target.value;
    console.log(id);
    this.props.dispatch(fetchDistrictsIfNeed(id))
  }
  _handleDistrictChange(){
    console.log();

  }
  _handleCommChange(){

  }

}
